<template>
    <div class="keyboard">
        <ul class="line-list" v-for="(row,rowNo) in keys" :key="rowNo">
            <li v-for="(column,columnNo) in row" :key="columnNo" @click="$emit('input',column)">{{column}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'StlswmKeyboard',
        props: {
            keys: Array
        },
        data() {
            return {};
        },
        methods: {},
    }
</script>


<style scoped>
    .keyboard {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background: #cbcbcb;
        padding-bottom: 10px;
    }

    .line-list {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 0 10px;
    }

    .line-list > li {
        width: 32px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        background: white;
        color: #333;
        margin: 10px 10px 0 0;
        border-radius: 4px;
    }

    .line-list > li:last-child {
        margin-right: 0;
    }
</style>
